<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改文章')" />
	<script th:src="@{/js/My97DatePicker/WdatePicker.js}" ></script>
	<th:block th:include="include :: select2-css" />
	<th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-article-edit" th:object="${article}">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
			<input id="treeId" name="parentId" type="hidden" th:field="*{folderId}" />
			<div class="form-group">	
				<label class="col-sm-3 control-label">父栏目：</label>
				<div class="col-sm-5">
					<!--<input id="folderId" name="folderId" th:field="*{folderId}" class="form-control" type="text">-->
					<div class="input-group">
						<input class="form-control" type="text" onclick="selectFolderTree()" id="treeName" readonly="true" >
						<span class="input-group-addon"><i class="fa fa-search"></i></span>
					</div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">文章名称：</label>
				<div class="col-sm-5">
					<input id="title" name="title" th:field="*{title}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">副标题：</label>
				<div class="col-sm-3">
					<input id="subtitle" name="subtitle" th:field="*{subtitle}" class="form-control" type="text">
				</div>
				<label class="col-sm-3 control-label">发布时间：</label>
				<div class="col-sm-3">
					<input id="publishTime" name="publishTime" th:field="*{publishTime}" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-3">
					<label class="radio-inline">
						<input type="radio" name="status"  th:if="${article.status == 1}" th:value="1"  checked> 显示
					</label>
					<label class="radio-inline">
						<input type="radio" name="status"  th:if="${article.status == 2}" th:value="2"  checked> 隐藏
					</label>
				</div>
			</div>

			<div class="form-group">	
				<label class="col-sm-3 control-label">是否登录权限：</label>
				<div class="col-sm-3">
					<label class="radio-inline">
						<input type="radio" name="isComment"  th:if="${article.isComment == 1}" th:value="1"  checked> 是
					</label>
					<label class="radio-inline">
						<input type="radio" name="isComment"  th:if="${article.isComment == 2}" th:value="2"  checked> 否
					</label>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">是否推荐：</label>
				<div class="col-sm-3">
					<label class="radio-inline">
						<input type="radio" name="isRecommend"  th:if="${article.isRecommend == 1}" th:value="1"  checked> 是
					</label>
					<label class="radio-inline">
						<input type="radio" name="isRecommend"  th:if="${article.isRecommend == 2}" th:value="2"  checked> 否
					</label>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">发布者：</label>
				<div class="col-sm-3">
					<input id="publishUser" name="publishUser" th:field="*{publishUser}" class="form-control" type="text">
				</div>
				<label class="col-sm-3 control-label">类型：</label>
				<div class="col-sm-3">
					<select name="type" class="form-control" >
						<option value="1">正常</option>
						<option value="2">预览</option>
						<option value="3">程序</option>
					</select>
				</div>
			</div>
			<!--<div class="form-group">-->
				<!--<label class="col-sm-3 control-label">开始时间：</label>-->
				<!--<div class="col-sm-8">-->
					<!--<input id="startTime" name="startTime" th:field="*{startTime}" class="form-control" type="text">-->
				<!--</div>-->
			<!--</div>-->
			<div class="form-group">
				<label class="col-sm-3 control-label">文章内容：</label>
				<div class="col-sm-9">
					<input id="content" name="content" th:field="*{content}" type="hidden">
					<div id="editor" class="summernote"></div>
				</div>
				<!--<div class="col-sm-9" th:if="${article.content} != null">-->
					<!--<input id="articleContent"  type="hidden">-->
					<!--<div class="summernote"></div>-->
				<!--</div>-->
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">跳转地址：</label>
				<div class="col-sm-8">
					<input id="jumpUrl" name="jumpUrl" th:field="*{jumpUrl}" class="form-control" type="text">
				</div>
				<label class="col-sm-3 control-label">图片路径：</label>
				<div class="col-sm-3" th:if="${article.imageUrl}!= null">
					<input id="imageUrl"  th:field="*{imageUrl}" class="form-control" type="hidden">
					<img id="imageId"  >
				</div>
				<div class="col-sm-3" th:if="${article.imageUrl}==null">
					<input type="file" accept="image/*" onchange="uploadFile()" id="fileUpload" multiple="multiple" />
				</div>
			</div>

		</form>
    </div>
    <div th:include="include::footer"></div>
	<th:block th:include="include :: summernote-js" />
    <script type="text/javascript">
        var fileServ='http://211.149.205.33:18080';
        var prefix = ctx + "question/article";
        var preFile = "http://211.149.205.33:18080/file/";
		$("#form-article-edit").validate({
			rules:{
                treeName:{
					required:true,
				},
			},
			focusCleanup: true
		});
		$(function () {
            //文章内容
            $('.summernote').summernote({
                //placeholder: '请输入公告内容',

                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['fontsize', ['fontsize']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']],
                    ['view', ['fullscreen', 'codeview', 'help']],

                ],
                height : 192,
                lang : 'zh-CN',
                callbacks: {
                    onImageUpload: function (files) {
                        sendFile(files[0], this);
                    }
                }

            });
            var content = $("#content").val();
            $('#editor').summernote('code', content);
        });

        // 上传文件
        function sendFile(file, obj) {

            var formData = new FormData();
            formData.append("files", file);

            $.ajax({
                url: fileServ+"/file/mulitiupload",
                type: "POST",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(resp){
                    if(null!=resp && resp.length>0){
                        var tempurl="http://211.149.205.33:18080/file/down/"+resp[0].fileid;
                        var tempname=resp[0].name;
                        $(obj).summernote('editor.insertImage', tempurl, tempname);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }

        function initview() {
            $(".sn-checkbox-open-in-new-window").hide();
            $(".link-dialog .modal-title").html("插入附件");
            $(".link-dialog .modal-body").empty();
            $(".link-dialog .modal-body").append('<div class="form-group note-form-group"><label class="note-form-label">本地上传</label><form id="uploadForm" enctype="multipart/form-data" method="post"><input name="files" class="file upload-file-input" type="file" size="20" multiple="multiple" /></form> </div>');
            $(".link-dialog .modal-footer").empty();
            $(".link-dialog .modal-footer").append('<button type="button" class="btn btn-primary" id="saveBtn" disabled>插入附件</button>');
            $(".note-group-image-url").hide();
        }
        initview();

        $(".upload-file-input").change(function () {
            var file = $(".upload-file-input").get(0).files[0];
            if (null!=file){
                $("#saveBtn").removeAttr("disabled");;
            }
        });

        $("#saveBtn").click(function () {
            var formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                url: fileServ+"/file/mulitiupload",
                type: "POST",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(resp){
                    if(null!=resp && resp.length>0){
                        var tempurl="http://211.149.205.33:18080/file/down/"+resp[0].fileid;
                        $(".note-editable p").append('<a href="'+tempurl+'" target="_blank">'+resp[0].name+'</a>');
                    }
                    console.log(resp);
                    console.log(resp[0].fileid);
                    $(".link-dialog").modal('hide');
                },
                error: function(error) {
                    $.modal.alertWarning("附件上传失败。");
                }
            });
        });

		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/edit", $('#form-article-edit').serialize(),saveCallback);
	        }
	    }
        function saveCallback(result) {
            var id = result.data;
            addFile(id) //上传
        }
        /*栏目管理-修改-选择部门树*/
        function selectFolderTree() {
            var folderId = $("#treeId").val();
            if(folderId > 0) {
                var options = {
                    title: '部门选择',
                    width: "380",
                    url: ctx  + "question/folder/selectDeptTree/" + $("#treeId").val(),
                    callBack: doSubmit
                };
                $.modal.openOptions(options);
            } else {
                $.modal.alertError("父部门不能选择");
            }
        }
        function doSubmit(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            if ($.tree.notAllowParents(tree)) {
                var body = layer.getChildFrame('body', index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                layer.close(index);
            }
        }
        var arr =[];  //定义一个数组
        function uploadFile(){		 //
            var file = $("#fileUpload").get(0).files[0];
            if(file != undefined){
                var formData = new FormData();
                formData.append("files", file);
                $.ajax({
                    url:preFile+"mulitiupload",
                    type: "POST",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(resp) {
                        var model=new Object();
                        model.fileId =resp[0].fileid; //文件id
                        model.fileName =resp[0].name;//文件名称
                        var index = model.fileName.lastIndexOf(".");
                        var suffix = model.fileName.substring(index+1);
                        model.fileType =suffix; //文件类型
                        arr.push(model);


                    },
                    error: function(error) {
                        $.modal.alertWarning("附件上传失败。");
                    }
                });
            } else {
                $.modal.alertWarning("服务出现错误 。联系管理员 ");
            }
        };
        function addFile(id){
            $.ajax({
                url:prefix+"/saveFile",
                type: "POST",
                data: {articleId:id,array:JSON.stringify(arr)},
                dataType:"json",
                success: function(resp) {

                }
            });
        }
        var imageUrl = $("#imageUrl").val();
        $("#imageId").attr("src",imageUrl);
	</script>
</body>
</html>
